/*
 * 3D测肤的折线图组件
 * @Author: ljb
 * @Date: 2018-05-09 15:17:36
 * @Last Modified by: ljb
 * @Last Modified time: 2018-09-14 17:04:31
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .line-chart {
        width: 100%;
        height: 231px;
        margin-top: 20px;
    }

</style>
<template>

	<div
		id="image_line_chart"
		ref="image_line_chart"
		class="line-chart"/>

</template>

<script>

import echarts from 'echarts';

export default {
	name: 'ImageLineChart',
	props: {
		chartData: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {

			line_chart: null,

			current_time: '',		// 当前选中的x坐标

			x: 0, // 图表的tooltip的x轴坐标

			y: 0, // 图表的tooltip的x轴坐标

		};
	},
	watch: {

		chartData() {
			this.initChartData();
		},

	},
	mounted() {
		this.line_chart = echarts.init(this.$refs.image_line_chart);

		this.initChartData();
	},
	beforeDestroy() {
		this.disposeChart();
	},
	methods: {

		/**
         * 销毁图表
         * @return {undefined}
         */
		disposeChart() {
			this.line_chart.dispose();
		},

		/**
         * 初始化折线图data
         * @return {undefined}
         */
		initChartData() {
			if (this.chartData.length === 0) return;

			this.formatData();
		},

		/**
         * 设置echarts
         * @param  {Array} xAxis  {x轴}
         * @param  {Array} series {数据}
         * @return {undefined}
         */
		setEchartOption({
			legend_data, grid, xAxis, yAxis, series, dataZoom,
		}) {
			const self = this;

			this.line_chart.clear();

			const option = {
				tooltip: {
					trigger: 'axis',
					formatter: `{a0}:{c0}${this.$t('report.score')}`,
					alwaysShowContent: true,
					triggerOn: 'click',
					axisPointer: {
						axis: 'x',
						label: {
							show: true,
							formatter(params) {
								const date = params.value.split(' ').shift().split('-');

								return (`${date[1]}-${date[2]}`);
							},
						},
					},
					position(point, param) {
						if (self.current_time === param[0].name) return;

						if (self.x !== point[0] || self.y !== point[1]) {
							[self.x, self.y] = point;
							self.current_time = param[0].name;
							self.$emit('show', param[0].name);
						}
					},
				},
				legend: {
					orient: 'vertical',
					data: legend_data,
					x: 'left',
				},
				axisPointer: {
					snap: true,
					lineStyle: {
						color: '#ccc',
					},
				},
				dataZoom: [
					{ // 这个dataZoom组件，也控制x轴。
						type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
						realtime: true,
						start: 100 - dataZoom,
						end: 100,
						zoomLock: true,
					},
				],
				grid,
				xAxis,
				yAxis,
				series,
			};

			this.line_chart.setOption(option);

			this.$emit('show', this.chartData[this.chartData.length - 1].created_at);
		},

		/**
         * 格式化数据成echart配置项所需数据
         * @param  {Array} need_data {需要展示的数据}
         * @return {undefined}
         */
		formatData() {
			const chart_option = {

				legend_data: [],

				grid: {
					left: 0,
					right: 0,
					top: 70,
					height: '60%',
				},

				xAxis: [],

				yAxis: [],

				series: [],

				dataZoom: 5,

			};

			const device_width = document.querySelector('.line-chart').offsetWidth;

			const data_length = this.chartData.length;

			chart_option.dataZoom = (parseFloat((device_width / 70).toFixed(2)) * 100) / data_length; // 根据屏幕宽度计算显示的条目数

			this.assembleData(chart_option);

			this.setEchartOption(chart_option);
		},

		/**
         * 组装数据
         * @param  {Object} option      {echart配置项对象}
         * @return {undefined}
         */
		assembleData(option) {
			const series_name = this.chartData[0].itemsname;

			const xAxis_data = [];

			const series_data = [];

			this.chartData.forEach((data) => {
				const value = parseInt(data.value, 10);

				const time = data.created_at;

				series_data.push(value);

				xAxis_data.push(time);
			});

			// 配置x轴数据
			const xAxis = {
				type: 'category',
				axisLine: {
					onZero: true,
					lineStyle: {
						color: '#c179f8',
					},
				},
				data: xAxis_data,
				// triggerEvent: true,
				axisTick: {
					interval: 0,
				},
				axisLabel: {
					interval: 0,
					color: '#333',
					formatter(value) {
						const date = value.split(' ').shift().split('-');

						return (`${date[1]}-${date[2]}`);
					},
				},
			};

			const new_array = series_data.concat([]);

			// 配置y轴数据
			const yAxis = {
				show: false,
				name: series_name,
				type: 'value',
				max: new_array.sort((a, b) => b - a)[0],
				axisLabel: {
					formatter: `{value}${this.$t('report.score')}`,
				},
				splitLine: {
					show: false,
				},
			};

			// 配置显示的数据
			const series = {
				name: series_name,
				type: 'line',
				symbol: 'circle',
				symbolSize: 8,
				hoverAnimation: false,
				silent: true,
				itemStyle: {
					color: '#c179f8',
				},
				lineStyle: {
					color: '#c179f8',
				},
				data: series_data,
			};

			option.legend_data.push(series_name);
			option.xAxis.push(xAxis);
			option.yAxis.push(yAxis);
			option.series.push(series);
		},

	},
};
</script>
